<template>
	<view v-if="isShow" class="w-three-picker" @touchmove.stop.prevent="preventTouchmove"
		:style="{'--color': color}"
	>
	
		<view @click.stop="tapMask" class="mask"></view>
		<view class="dialog" :style="{width: 700 + 'rpx', height: (800 + 70) + 'rpx'}">
			<!-- 标题 -->
			<view class="title">
				<view v-for="item in title" :key="item" class="title-item">{{item}}</view>
			</view>
			
			<!-- 选择器 -->
			<view class="picker">
				<!-- scroll-view 需要给高度 -->
				<scroll-view scroll-y class="column" :style="{height: 740 + 'rpx'}">
					<view @click.stop="nodeclick($event, 0, index)" 
						v-for="(item, index) in localdata" :key="item[valueField]" 
						class="item" :class="{active: localvalue[0] === index}"
					>
						<text class="t">{{item[textField]}}</text>	
					</view>	
					
				</scroll-view>
				
				<scroll-view scroll-y class="column" :style="{height: 740 + 'rpx'}">
					<view @click.stop="nodeclick($event, 1, index)" 
						v-for="(item, index) in column1" :key="item[valueField]" 
						class="item" :class="{active: localvalue[1] === index}"
					>
						<text class="t">{{item[textField]}}</text>	
					</view>	
					
				</scroll-view>
				
				<scroll-view scroll-y class="column" :style="{height: 740 + 'rpx'}">
					<view @click.stop="nodeclick($event, 2, index)" 
						v-for="(item, index) in column2" :key="item[valueField]" 
						class="item" :class="{active: localvalue[2] === index}"
					>
						<text class="t">{{item[textField]}}</text>	
					</view>	
					
				</scroll-view>
			</view>
			
			<!-- 按钮 -->
			<view class="btn-group">
				<view v-if="showCancel" @click.stop="tapCancel" class="cancel">
					<text>{{locale === 'zh-Hans' ? '取消' : 'Cancel'}}</text>
				</view>
				<view @click.stop="tapConfirm" class="confirm" :class="{active: isCompleted}">
					<text>{{locale === 'zh-Hans' ? '完成' : 'Confirm'}}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const check = (column, index) => {
		return column.length > 0 ? (index !== '') : true
	}
	const getResult = (localdata, localvalue, textField, valueField) => {
		const res = {
			text: ['', '', ''],
			value: ['', '', '']
		}
		if(localvalue[0] === '') return res
		res.text[0] = localdata[localvalue[0]][textField]
		res.value[0] = localdata[localvalue[0]][valueField]
		if(localvalue[1] === '') return res
		res.text[1] = localdata[localvalue[0]].children[localvalue[1]][textField]
		res.value[1] = localdata[localvalue[0]].children[localvalue[1]][valueField]
		if(localvalue[2] === '') return res
		res.text[2] = localdata[localvalue[0]].children[localvalue[1]].children[localvalue[2]][textField]
		res.value[2] = localdata[localvalue[0]].children[localvalue[1]].children[localvalue[2]][valueField]
		return res
	}
	export default {
		name: 'WThreePicker',
		emits: ['input', 'update:modelValue', 'confirm', 'cancel', 'maskclick', 'nodeclick'],
		props: {
			localdata: {
				type: Array,
				default() {
					return []
				}
			},
			modelValue: {
				type: Array,
				default() {
					return ['', '', '']
				}
			},
			value: {
				type: Array,
				default() {
					return ['', '', '']
				}
			},
			title: {
				type: Array,
				default() {
					return ['一级', '二级', '三级']
				}
			},
			color: {
				type: String,
				default: '#3478f6'
			},
			showCancel: {
				type: Boolean,
				default: true
			},
			isMaskClick: {
				type: Boolean,
				default: false
			},
			textField: {
				type: String,
				default: 'text'
			},
			valueField: {
				type: String,
				default: 'value'
			}
		},
		computed: {
			column1() {
				if(this.localvalue[0] === '') return []
				return this.localdata[this.localvalue[0]].children || []
			},
			column2() {
				if(this.localvalue[1] === '') return []
				return this.localdata[this.localvalue[0]].children[this.localvalue[1]].children || []
			},
			isCompleted() {
				return check(this.localdata, this.localvalue[0])
					&& check(this.column1, this.localvalue[1]) 
					&& check(this.column2, this.localvalue[2])
			}
		},
		watch: {
			// #ifdef VUE3
			modelValue: {
				handler(newVal) {
					this.localvalue = newVal.slice()
				},
				immediate: true
			},
			// #endif
			// #ifdef VUE2
			value: {
				handler(newVal) {
					this.localvalue = newVal.slice()
				},
				immediate: true
			},
			// #endif
		},
		data() {
			return {
				isShow: false,
				wh: 0,
				ht: 0,
				localvalue: ['', '', ''], // 组件内的当前显示的下标值
				locale: 'zh-Hans',
			}
		},
		created() {
			const windowInfo = uni.getWindowInfo()
			this.wh = parseInt(windowInfo.windowWidth * 0.8)
			this.ht = parseInt(windowInfo.windowHeight * 0.5)
			this.locale = uni.getLocale()
		},
		methods: {
			nodeclick(e, column, index) {
				// #ifndef APP-NVUE
				e.stopPropagation()
				// #endif
				const localvalue = this.localvalue.slice()
				localvalue[column] = index
				switch(column) {
					case 0:
						localvalue[1] = ''
						localvalue[2] = ''
					case 1:
						localvalue[2] = ''
				}
				this.localvalue = localvalue
				this.$emit('nodeclick', {
					detail: {
						column,
						index,
						value: localvalue.slice()
					}
				})
			},
			// ref调用方法
			show() {
				this.$nextTick(() => {
					this.isShow = true
				})
			},
			hide() {
				this.isShow = false
			},
			
			tapConfirm() {
				if(this.isCompleted) {
					const localvalue = this.localvalue.slice()
					this.$emit('input', localvalue)
					this.$emit('update:modelValue', localvalue)
					this.$nextTick(() => {
						this.hide()
						this.$emit('confirm', getResult(this.localdata, localvalue, this.textField, this.valueField))
					})
				}
			},
			tapCancel() {
				this.hide()
				this.$emit('cancel')
			},
			tapMask() {
				if(this.isMaskClick) {
					this.hide()
					this.$emit('maskclick')
				}
			},
			// 防止遮罩层和scroll-view的滚动穿透
			preventTouchmove() {}
		}
	}
</script>

<style lang="scss">
	.w-three-picker {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.mask {
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			// touch-action: none;
		}
		
		.dialog {
			position: relative;
			background: #fff;
			overflow: hidden;
			border-radius: 4px;
			
			.title {
				box-sizing: border-box;
				display: flex;
				height: 35px;
				line-height: 34px;
				border-bottom: 1px solid #ededed;
				
				.title-item {
					flex: 1;
					font-size: 16px;
					font-weight: bold;
					text-align: center;
					color: #3a3a3a;
					// border-right: 1px solid #ededed;
					background: #f7f7f7;
					// &:last-child {
					// 	border-right: none;
					// }
				}
			}
			
			.picker {
				display: flex;
				
				.column {
					flex: 1;
					border-right: 1px solid #ededed;
					&:last-child {
						border-right: none;
					}
					
					.item {
						padding: 8px 2px;
						line-height: 18px;
						font-size: 13px;
						text-align: center;
						color: #3a3a3a;
						border-bottom: 1px solid #ededed;
						&.active {
							color: #fff;
							background: #24c373;
						}
					}
				}
			}
			
			.btn-group {
				box-sizing: border-box;
				height: 35px;
				line-height: 34px;
				font-size: 16px;
				text-align: center;
				font-weight: bold;
				border-top: 1px solid #ededed;
				display: flex;
				.confirm {
					flex: 1;
					color: #999;
					background: #f7f7f7;
					&.active {
						color: #24c373;
					}
				}
				.cancel {
					flex: 1;
					color: #999;
					background: #f7f7f7;
					border-right: 1px solid #ededed;
				}
			}
		}
	}
</style>
